<template>
  <div class="nft">
    <div class="nft-title">购买NFT</div>

    <div class="nft-img" style="margin-bottom: 60px">
      <div class="nft-name">金额: {{ nftInfo.price }}</div>
    </div>

    <div style="text-align: center; margin-top: 20px; padding: 25px">
      <nut-button color="#7232dd" size="large" @click="createPayOrder"
        >支付</nut-button
      >
    </div>
    <p
      style="
        text-align: center;
        margin-top: 100px;
        font-size: 14px;
        color: #999;
      "
    >
      s11e-dao 提供技术支持
    </p>
  </div>
</template>

<script setup>
import { reactive, onMounted } from "vue";
import { Toast } from "@nutui/nutui";
import { useRouter } from "vue-router";

const router = useRouter()

import { getGoodsDetail, createPurchaseOrder } from "@/api/nft";

// import axios from "axios";
// import wx from "weixin-js-sdk";

import { getUrlParams } from "../utils/getUrlParams";
let urlParts1 = (window.location.search || window.location.href).split("?");
let urlParams1 = getUrlParams(urlParts1);
// 从路由中获取参数，请求后台数据
let goodsId = urlParams1["serialNo"];

// let wxUserInfo = reactive({
//   openid: "",
// });

// nft属性
let nftInfo = reactive({
  serialNo: null,
  password: null,
  tokenId: null,
  goodsName: null,
  description: null,
  obtainMethod: null, // 领取方式：1 免费领取/空投 2 购买  3 口令领取 4 一人一码口令领取
  contract: {
    contract: "",
  },
  price: 0,
  metadataImage: null,
});

const getNftDetail = async () => {
  console.log(goodsId);
  getGoodsDetail({ serialNo: goodsId }).then((res) => {
    console.log(res.data);
    nftInfo.price = res.data.data?.price;
  });
};

let code = urlParams1["code"]; //"011XNO0w39pwMZ2PM61w3sW0c10XNO0i"
if (code) {
  console.log(code)
  console.log("微信授权code存在")
  goodsId = sessionStorage.getItem("serialNo");
  console.log(goodsId);
  sessionStorage.removeItem("serialNo");
  // getUserInfo({ code }).then((res) => {
  //   console.log(res);
  //   wxUserInfo.openid = res.data.data.customerInfo.credential;
  // });
  console.log("微信授权code存在")
  getNftDetail();
} else {
  console.log("微信授权code不存在")
  // 跳转之前缓存商品订单
  console.log(goodsId);
  sessionStorage.setItem("serialNo", goodsId);
  let wxRedirectUrl = encodeURIComponent("http://biganh5.s11edao.com/#/buyNft");
  window.location = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx581d0c32a8c783a1&redirect_uri=${wxRedirectUrl}&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redire`;
}

onMounted(() => {
  console.log("组件挂在之后渲染")
  getNftDetail();
});

// 创建支付订单
// 购买Nft逻辑
const createPayOrder = async () => {
  // 没有口令直接唤起钱包
  let ccy = "cny";
  let quantity = "1";
  // let openid = wxUserInfo.openid;
  let anywebCode = sessionStorage.getItem("anywebCode");
  let toAddress = sessionStorage.getItem("toAddress");
  const res = await createPurchaseOrder({
    code,
    goodsId,
    ccy,
    quantity,
    anywebCode,
    toAddress,
  });
  console.log(res);

  let { appId, nonceStr, packageValue, paySign, timeStamp } = res.data.data;
  window.WeixinJSBridge.invoke(
    "getBrandWCPayRequest",
    {
      appId: appId, //公众号ID，由商户传入
      timeStamp: timeStamp, //时间戳，自1970年以来的秒数
      nonceStr: nonceStr, //随机串
      package: packageValue,
      signType: "MD5", //微信签名方式：
      paySign: paySign, //微信签名
    },
    function (res) {
      console.log("pay res", res);
      if (res.err_msg === "get_brand_wcpay_request:ok") {
        Toast.success("支付成功");
        router.push("obtainNftSuccess")
        console.log("支付成功");
      } else if (res.err_msg === "get_brand_wcpay_request:cancel") {
        console.log("用户取消支付");
      } else if (res.err_msg === "get_brand_wcpay_request:fail") {
        console.log("支付失败");
      }
    }
  );
  console.log("支付");
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.nft-title {
  text-align: center;
  font-size: 18px;
  letter-spacing: 2px;
  color: #666;
  padding: 8px;
  margin: 8px auto 60px auto;
  border-bottom: 1px solid #ddd;
}
.nft-img {
}

.nft-name {
  text-align: center;
  font-size: 15px;
  letter-spacing: 1px;
  color: #333;
  padding: 30px 15px 5px 15px;
}

.nft-desc {
  text-align: center;
  font-size: 12px;
  line-height: 160%;
  color: #888;
  padding: 8px 80px;
}

.nft-img view {
  margin: 0 auto !important;
}
</style>


